<template>
  <div class="line">
    <div class="main" ref="main">

    </div>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts') // 引入echarts
// 引入提示框和标题组件
require('echarts-gl')

export default {
  data () {
    return {
      title: {
        text1: '图表名称',
        x: 'left',
        y: 'top',
        fontFamily: 'Courier New',
        fontSize: 20,
        color: '#000'
      },

      legend: {
        backgroundColor: '#EFEBE3', // 背景颜色
        labColor: '#000', // 标签颜色
        labSize: 10, // 标签大小
        pointColor: '#2d2fd2', // 点颜色
        pointSize: 5, // 点大小
        pointType: 'circle', // 点形状
        shadowColor: '#e69ba4'
      },
      gridding: {
        isShowX: true, // x轴分割线
        isShowY: true, // y轴分割线
        isShowZ: true, // y轴分割线
        lineColorX: '#c6c5ca', // x轴分割线颜色
        lineColorY: '#c6c5ca', // y轴分割线颜色
        lineColorZ: '#c6c5ca', // z轴分割线颜色
        lineWidthX: '1', // x轴分割线粗细
        lineWidthY: '1', // y轴分割线粗细
        lineWidthZ: '1' // z轴分割线粗细
      },
      data: null
    }
  },
  mounted () {
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      console.log('在渲染图形时设置的形状' + this.legend.pointType)
      // const THIS = this
      this.dealData()
      const mainDiv = this.$refs.main // 找到绘制的区域,强烈推荐使用refs
      const myChart = echarts.init(mainDiv) // 初始化
      myChart.setOption({ // 官网例子
        backgroundColor: this.legend.backgroundColor,
        title: {
          text: this.title.text1,
          x: this.title.x, // 标题横向位置//////////////////////////////////// 增
          y: this.title.y, // 标题纵向位置//////////////////////////////////// 增
          textStyle: {
            fontFamily: this.title.fontFamily,
            fontSize: this.title.fontSize,
            color: this.title.color
          }
        },
        xAxis3D: {
          name: 'x',
          type: 'value',
          axisLabel: {
            color: this.legend.labColor, // 刻度标签
            fontSize: this.legend.labSize
          },
          splitLine: {
            show: this.gridding.isShowX, // 是否显示分割线
            lineStyle: {
              color: this.gridding.lineColorX, // 分割线颜色
              width: this.gridding.lineWidthX // 分割线粗细  1--4
            }
          }
        },
        yAxis3D: {
          name: 'y',
          type: 'value',
          axisLabel: {
            color: this.legend.labColor, // 刻度标签
            fontSize: this.legend.labSize
          },
          splitLine: {
            show: this.gridding.isShowY, // 是否显示分割线
            lineStyle: {
              color: this.gridding.lineColorY, // 分割线颜色
              width: this.gridding.lineWidthY // 分割线粗细  1--4
            }
          }
        },
        zAxis3D: {
          name: 'z',
          type: 'value',
          axisLabel: {
            color: this.legend.labColor, // 刻度标签
            fontSize: this.legend.labSize
          },
          splitLine: {
            show: this.gridding.isShowZ, // 是否显示分割线
            lineStyle: {
              color: this.gridding.lineColorZ, // 分割线颜色
              width: this.gridding.lineWidthZ // 分割线粗细  1--4
            }
          }
        },
        grid3D: {
          axisLine: {
            lineStyle: {
              color: '#090b0a' // xyz轴线颜色
            }
          },
          axisPointer: {
            lineStyle: {
              color: this.legend.shadowColor // 坐标轴指示线
            },
            show: true // 不坐标轴指示线
          },
          viewControl: {
            /*  autoRotate: true,//旋转展示
                projection: 'orthographic' */
            beta: 10
          },
          boxWidth: 150,
          boxHeight: 100,
          boxDepth: 100,
          top: -50
        },
        series: [{
          type: 'scatter3D',
          symbolSize: this.legend.pointSize, // 点的大小
          data: this.data,
          symbol: this.legend.pointType, // 点形状
          dimensions: ['a', 'b', 'c'// 显示框信息
          ],
          color: this.legend.pointColor, // 点颜色
          itemStyle: {
            borderWidth: 1,
            borderColor: 'rgba(255,255,255,0.8)'// 边框样式
          },
          emphasis: {
            itemStyle: {
              color: '#ccc'// 高亮
            }
          }
        }],
        // 提示框取默认值，即鼠标移动到柱状图会显示内容
        tooltip: {
        },
        // 右上角工具条
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        }
      })
    },
    dealData () {
      const dataT = this.$store.state.singleFile.info.toString().replace(/[\r\n]/g, '')
      const dataT2 = JSON.parse(dataT)
      const arr1 = []
      for (let i = 0; i < dataT2.test.length; i++) {
        const arr2 = []
        arr2[0] = dataT2.test[i].x
        arr2[1] = dataT2.test[i].y
        arr2[2] = dataT2.test[i].z
        arr1[i] = arr2
      }
      this.data = arr1
      // console.log('立体柱状图接收到的数据是')
      // console.log(this.data)
    }
  },
  watch: {
    '$store.state.singleFile.date': function (val) {
      this.initEcharts()
    },
    '$store.state.chartTitle.text': function (val) {
      this.title.text1 = val
      console.log('histogram接收到的title' + this.title.text)
      this.initEcharts()
    },
    '$store.state.chartTitle.titleAcross': function (val) {
      this.title.x = this.$store.state.chartTitle.titleAcross
      this.initEcharts()
    },
    '$store.state.chartTitle.titleVertical': function (val) {
      this.title.y = this.$store.state.chartTitle.titleVertical
      this.initEcharts()
    },
    '$store.state.chartTitle.wordFamily': function (val) {
      this.title.fontFamily = val
      this.initEcharts()
    },
    '$store.state.chartTitle.wordSize': function (val) {
      this.title.fontSize = val
      this.initEcharts()
    },
    '$store.state.chartTitle.titleColor': function (val) {
      this.title.color = val
      this.initEcharts()
    },
    '$store.state.cubeScatterLegend.backgroundColor': function (val) {
      this.legend.backgroundColor = val
      this.initEcharts()
    },
    '$store.state.cubeScatterLegend.labColor': function (val) {
      this.legend.labColor = val
      this.initEcharts()
    },
    '$store.state.cubeScatterLegend.labSize': function (val) {
      this.legend.labSize = val
      this.initEcharts()
    },
    '$store.state.cubeScatterLegend.pointColor': function (val) {
      this.legend.pointColor = val
      this.initEcharts()
    },
    '$store.state.cubeScatterLegend.pointSize': function (val) {
      this.legend.pointSize = val
      this.initEcharts()
    },
    '$store.state.cubeScatterLegend.pointType': function (val) {
      this.legend.pointType = ''
      console.log('立体散点图接收到的点形状时')
      this.legend.pointType = val
      console.log(this.legend.pointType)
      this.initEcharts()
    },
    '$store.state.cubeScatterLegend.shadowColor': function (val) {
      this.legend.shadowColor = val
      this.initEcharts()
    },
    '$store.state.grid.isShowX': function (val) {
      console.log('柱状图接收到的是否显示x轴分割线' + val)
      this.gridding.isShowX = val
      this.initEcharts()
    },
    '$store.state.grid.isShowY': function (val) {
      this.gridding.isShowY = val
      console.log('柱状图接收到的是否显示y轴分割线' + val)
      this.initEcharts()
    },
    '$store.state.grid.isShowZ': function (val) {
      console.log('柱状图接收到的是否显示z轴分割线' + val)
      this.gridding.isShowZ = val
      this.initEcharts()
    },
    '$store.state.grid.lineColorX': function (val) {
      console.log('柱状图接收到X轴分割线颜色' + val)
      this.gridding.lineColorX = val
      this.initEcharts()
    },
    '$store.state.grid.lineColorY': function (val) {
      console.log('柱状图接收到Y轴分割线颜色' + val)
      this.gridding.lineColorY = val
      this.initEcharts()
    },
    '$store.state.grid.lineColorZ': function (val) {
      this.gridding.lineColorZ = val
      this.initEcharts()
    },
    '$store.state.grid.lineWidthX': function (val) {
      console.log('柱状图接收到X轴分割线粗细为' + val)
      this.gridding.lineWidthX = val
      this.initEcharts()
    },
    '$store.state.grid.lineWidthY': function (val) {
      this.gridding.lineWidthY = val
      this.initEcharts()
    },
    '$store.state.grid.lineWidthZ': function (val) {
      this.gridding.lineWidthZ = val
      this.initEcharts()
    }
  },
  destroyed () {
    this.$store.state.chartTitle.id = ''
    this.$store.state.chartTitle.text = ''
    this.$store.state.chartTitle.titleAcross = ''
    this.$store.state.chartTitle.titleVertical = ''
    this.$store.state.chartTitle.wordFamily = ''
    this.$store.state.chartTitle.wordSize = ''
    this.$store.state.chartTitle.titleColor = ''

    this.$store.state.grid.isShowX = true
    this.$store.state.grid.isShowY = true
    this.$store.state.grid.lineColorX = '#c6c5ca'
    this.$store.state.grid.lineColorY = '#c6c5ca'
    this.$store.state.grid.lineWidthX = '1'
    this.$store.state.grid.lineWidthY = '1'
    this.$store.state.grid.isShowZ = true
    this.$store.state.grid.lineColorZ = '#c6c5ca'
    this.$store.state.lineWidthZ = '1'
  }
}
</script>
<style lang="scss" scoped>
  .line{
    .main {
      width: 735px;
      height:650px;
    }
  }
</style>
